<template>
  <el-row>
    <el-col :span="18">
      <el-card class="card-item1">
        <div class="title">
          <h3>今日设备运行状态</h3>
          <p>更新时间:2025年5月20日</p>
          <el-icon color="#86909c" style="margin-left: 5px;" size="15px">
            <Refresh />
          </el-icon>
        </div>

        <div class="equipment">
          <div class="item">
            <h4 style="font-weight: bold;margin:30px 0; ">充电桩使用率</h4>
            <img :src="flash" alt="充电桩图片">
            <h1 style="font-weight: bold;margin:30px 0; font-size: 30px;">72 / 95</h1>
            <div class="statistic-card">
              <el-statistic :value="9" style="margin:30px 0">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    异常设备
                    <el-tooltip effect="dark" content="当前有9台设备异常,请尽快处理" placement="top">
                      <el-icon style="margin-left: 4px" :size="12">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer" style="margin-bottom: 0px;">
                <div class="footer-item">
                  <span>相较昨日</span>
                  <span class="green">
                    24%
                    <el-icon color="green">
                      <CaretTop />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="item">
            <h4 style="font-weight: bold;margin: 30px 0; ">充电柜使用率</h4>
            <img :src="flash2" alt="充电柜图片">
            <h1 style="font-weight: bold;margin:30px 0; font-size: 30px;">655 / 1233</h1>
            <div class="statistic-card">
              <el-statistic :value="22" style="margin:30px 0">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    异常设备
                    <el-tooltip effect="dark" content="当前有22台设备异常,请尽快处理" placement="top">
                      <el-icon style="margin-left: 4px" :size="12">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer" style="margin-bottom: 0px;">
                <div class="footer-item">
                  <span>相较昨日</span>
                  <span class="green">
                    20%
                    <el-icon color="red">
                      <CaretTop />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="item">
            <h4 style="font-weight: bold;margin: 30px 0; ">充电站使用率</h4>
            <img :src="flash3" alt="充电站图片">
            <h1 style="font-weight: bold;margin:30px 0; font-size: 30px;">2263 / 3998</h1>
            <div class="statistic-card">
              <el-statistic :value="47" style="margin:30px 0">
                <template #title>
                  <div style="display: inline-flex; align-items: center">
                    异常设备
                    <el-tooltip effect="dark" content="当前有47台设备异常,请尽快处理" placement="top">
                      <el-icon style="margin-left: 4px" :size="12">
                        <Warning />
                      </el-icon>
                    </el-tooltip>
                  </div>
                </template>
              </el-statistic>
              <div class="statistic-footer" style="margin-bottom: 0px;">
                <div class="footer-item">
                  <span>相较昨日</span>
                  <span class="green">
                    25%
                    <el-icon color="green">
                      <CaretTop />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>


      </el-card>

      <el-card class="card-item2" style="height: 250px">
        <template #header>
          <div class="card-header">
            <span style="font-weight: bold; font-size: 20px;">常用功能</span>
          </div>
        </template>
        <div class="card-content">
          <el-col :span="4">
            <img :src="repair" alt="图标">
            <p>设备维修</p>
          </el-col>
          <el-col :span="4">
            <img :src="progress" alt="图标">
            <p>任务进度</p>
          </el-col>
          <el-col :span="4">
            <img :src="remain" alt="图标">
            <p>任务进度</p>
          </el-col>
          <el-col :span="4">
            <img :src="total" alt="图标">
            <p>营收占比</p>
          </el-col>
          <el-col :span="4">
            <img :src="money" alt="图标">
            <p>营收占比</p>
          </el-col>
          <el-col :span="4">
            <img :src="daily" alt="图标">
            <p>每日日报</p>
          </el-col>

        </div>
      </el-card>

      <el-card class="card-item3">
        <template #header>
          <div class="card-header">
            <span style="font-weight: bold; font-size: 20px;">能源统计</span>
          </div>
        </template>
        <div class="echart-content">
          <el-row>
            <el-col :span="6">
              <div ref="echartRef1" style="width: 100%;height: 400px;display: flex;align-items: center; "></div>
            </el-col>
            <el-col :span="18">
              <div ref="echartRef2" style="width: 100%;height: 400px;display: flex;align-items: center;"></div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="card-item4">
        <template #header>
          <div class="card-header">
            <span style="font-weight: bold; font-size: 20px;">能源统计</span>
          </div>
        </template>
        <div ref="echartRef3" style="width: 100%;height: 240px;"></div>
      </el-card>
      <el-card class="card-item5">
        <template #header>
          <div class="card-header">
            <h1 style="font-weight: bold; font-size: 20px;">营收统计表</h1>
          </div>
        </template>
        <ul class="ranking-list">
          <li class="ranking-item">
            <span class="rank" style="background-color: rgb(103, 194, 58);color: #fff;">1</span>
            <span class="store-name">广州</span>
            <span class="sales">52,457</span>
            <span style="margin-left:50px">
              24%
              <el-icon color="green">
                <CaretTop />
              </el-icon>
            </span>
          </li>
          <li class="ranking-item">
            <span class="rank" style="background-color:rgb(64, 158, 255) ;color: #fff ;">2</span>
            <span class="store-name">上海</span>
            <span class="sales">323,234</span>
            <span style="margin-left: 50px;">
              24%
              <el-icon color="red">
                <CaretBottom />
              </el-icon>
            </span>
          </li>
          <li class="ranking-item">
            <span class="rank" style="background-color:rgb(230, 162, 60) ;color: #fff ;">3</span>
            <span class="store-name">佛山</span>
            <span class="sales">192,255</span>
            <span style="margin-left: 50px;">
              24%
              <el-icon color="red">
                <CaretBottom />
              </el-icon>
            </span>
          </li>
          <li class="ranking-item">
            <span class="rank">4</span>
            <span class="store-name">珠海</span>
            <span class="sales">17,540</span>
            <span style="margin-left: 50px;">
              24%
              <el-icon color="green">
                <CaretTop />
              </el-icon>
            </span>
          </li>
          <li class="ranking-item">
            <span class="rank">5</span>
            <span class="store-name">深圳</span>
            <span class="sales">662,337</span>
            <span style="margin-left: 50px;">
              24%
              <el-icon color="red">
                <CaretBottom />
              </el-icon>
            </span>
          </li>
          <li class="ranking-item">
            <span class="rank">6</span>
            <span class="store-name">厦门</span>
            <span class="sales">22,941</span>
            <span style="margin-left: 50px;">
              24%
              <el-icon color="green">
                <CaretTop />
              </el-icon>
            </span>
          </li>
          <li class="ranking-item">
            <span class="rank">7</span>
            <span class="store-name">长沙</span>
            <span class="sales">565,221</span>
            <span style="margin-left: 50px;">
              24%
              <el-icon color="green">
                <CaretTop />
              </el-icon>
            </span>
          </li>
        </ul>
      </el-card>
      <el-card class="card-item6">
        <template #header>
          <div class="card-header">
            <span style="font-weight: bold; font-size: 20px;">故障报警</span>
          </div>
        </template>
        <el-timeline style="max-width: 600px">
          <el-timeline-item timestamp="2024/4/12" placement="top" :hollow="true" type="danger">
            <el-card>
              <h4>矿业北路通讯中断</h4>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2024/2/3" placement="top" :hollow="true" type="warning">
            <el-card>
              <h4>黄河南路超出服务区域</h4>

            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2024/5/17" placement="top" :hollow="true" type="danger">
            <el-card>
              <h4>6号机组异常断电</h4>

            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-col>

  </el-row>
</template>

<script setup lang="ts">
import flash from '@/assets/flash.png'
import flash2 from '@/assets/flash2.png'
import flash3 from '@/assets/flash3.png'
import repair from '@/assets/repair.png'
import progress from '@/assets/progress.png'
import remain from '@/assets/remain.png'
import total from '@/assets/total.png'
import money from '@/assets/money.png'
import daily from '@/assets/daily.png'
import { reactive, ref } from 'vue'
import { useChart } from '@/hooks/userChart'
import { chartDataApi, chartDataApi2, chartDataApi3 } from '@/api/dashboard'

const echartRef1 = ref(null)
const echartRef2 = ref(null)
const echartRef3 = ref(null)



const setChartData = async () => {
  const chartOptions: any = reactive({
    title: {
      text: '电量统计',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: []
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}kw'
      }
    },
    series: [
      {
        name: '',
        type: 'line',
        data: [],
        lineStyle: {
          width: 4
        },
        itemStyle: {
          color: "purple",
          shadowBlur: 5,
          shadowColor: 'rgba(0,255,0,0.5)'
        },
        smooth: true
      },
      {
        name: '',
        type: 'line',
        data: [],
        lineStyle: {
          width: 4
        },
        itemStyle: {
          color: "lightgreen",
          shadowBlur: 5,
          shadowColor: 'rgba(0,255,0,0.5)'
        },
        smooth: true
      },
      {
        name: '',
        type: 'line',
        data: [],
        lineStyle: {
          width: 4
        },
        itemStyle: {
          color: "skyblue",
          shadowBlur: 5,
          shadowColor: 'rgba(0,255,0,0.5)'
        },
        smooth: true
      },

    ]
  });
  const res = await chartDataApi()
  chartOptions.legend.data = res.data.list.map((item: any) => item.name);
  for (let i = 0; i < res.data.list.length; i++) {
    chartOptions.series[i].name = res.data.list[i].name
    chartOptions.series[i].data = res.data.list[i].data
  }
  return chartOptions
}

const setChartData2 = async () => {
  const chartOptions: any = reactive({
    legend: {
      top: 'bottom'
    },
    tooltip: {
      trigger: "item",
      formatter: '{a}<br/>{b}:{c}'
    },
    series: [
      {
        name: '营收占比',
        type: 'pie',
        radius: ["40%", "55%"],
        center: ['50%', '50%'],
        roseType: "area",
        emphasis: {
          label: {
            show: true,
            fontSize: "16",
            fontWeight: "bold"
          }
        },
        data: []
      }
    ],
    graphic: {
      type: 'text',
      left: "center",
      top: "center",
      style: {
        text: "营收占比",
        fontSize: 20,
        fill: "#333"
      }
    }
  })
  const res = await chartDataApi2()
  chartOptions.series[0].data = res.data.list;
  return chartOptions
}

const setChartData3 = async () => {
  const chartOptions = reactive({
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '闲置数' },
        { name: '使用数' },
        { name: '故障数' },
        { name: '维修数' },
        { name: '更换数' },
        { name: '报废数' }
      ]
    },
    series: [
      {
        name: '设备总览',
        type: 'radar',
        data: [
          {
            value: [],
            name: '设备总览'
          },

        ]
      }
    ]
  })
  const res = await chartDataApi3();
  chartOptions.series[0].data[0].value = res.data.list
  return chartOptions
}

useChart(echartRef2, setChartData)
useChart(echartRef1, setChartData2)
useChart(echartRef3, setChartData3)

//

</script>


<style scoped lang="less">
.title {
  display: flex;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  align-items: end;
  margin-bottom: 15px;

  P {
    color: #86909c;
    margin-left: 20px;
    font-size: 15px;
  }
}

.equipment {
  display: flex;
  justify-content: space-between;
  margin: 0 40px;
  align-items: center;
}

.card-item2 {
  margin: 30px 0;
}

.card-content {
  display: flex;
  justify-content: space-around;
  text-align: center;
  padding-top: 30px;

  p {
    margin-top: 20px;
  }
}

.card-item5 {
  margin: 30px 20px;

}

.card-item4,
.card-item6 {
  margin: 0 20px;
}



.quick {

  margin-top: 30px;
  text-align: center;

  p {
    margin-top: 10px;
    color: #333;
  }
}

.ranking-list {
  .ranking-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;

    .rank {
      display: inline-block;
      font-weight: bold;
      color: #666;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      text-align: center;
      line-height: 25px;
    }

    .store-name {
      flex-grow: 1;
      padding: 0 10px;
    }

    .sales {
      color: #666;
    }
  }

  .ranking-item:nth-child(even) {
    background-color: rgb(253, 246, 236);
  }
}
</style>